<template>
	<view class="header">
		<dam-toolbar title="山师小灵">
			<!-- <template #left>
				<icon class="icon-list bs bs-list" @click="handleLeftClick"></icon>
			</template> -->
			<template #right>
				<icon class="icon-newChat iconfont bs-newChat" @click="handleRightClick"></icon>
			</template>
		</dam-toolbar>
	</view>
</template>

<script lang="ts" setup>
import { defineEmits } from 'vue';
import DamToolbar from '@/dam_uni_frame/components/dam-toolbar/dam-toolbar.vue';

// 定义向父组件发送事件
const emit = defineEmits(['left-click', 'right-click']);

// 左侧点击事件处理函数
function handleLeftClick() {
	emit('left-click');
}

// 右侧点击事件处理函数
function handleRightClick() {
	emit('right-click');
}
</script>

<style scoped lang="scss">
@import "/dam_uni_frame/styles/dam_theme_common.scss";
@import "/static/css/iconfont.css";

.header {
	width: 100%;
	position: relative;
	z-index: 100;
}

.icon-list {
	font-size: 26px;
	margin-left: 10px;
}

.icon-newChat {
	font-size: 22px;
	margin-right: 10px;
	color: #2196f3;
	transition: all 0.3s ease;

	&:active {
		transform: scale(1.1);
		color: #22c4ff;
	}
}

:deep(.dam-toolbar) {
	width: 100%;
	background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
	border-bottom: 1px solid rgba(34, 196, 255, 0.1);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

:deep(.dam-toolbar__content) {
	height: var(--status-bar-height);
	display: flex;
	align-items: center;
	justify-content: center;
}

:deep(.dam-toolbar__title) {
	font-size: 18px;
	font-weight: 500;
	color: #333;
	position: relative;

	&::after {
		content: '';
		position: absolute;
		bottom: -8px;
		left: 50%;
		transform: translateX(-50%);
		width: 30px;
		height: 3px;
		background: linear-gradient(90deg, #22c4ff, #2196f3);
		border-radius: 3px;
	}
}
</style>